<template>
	<view class="app_main" :style="{height: btom}">
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight + 'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->

				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->

				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<view :style="{height: navbarStatusHeight + navBarHeight + 'px'}"></view>
		</view>
		<view class="logo_main">
			<!-- <view class="title_header">
				长青服务中心
			</view> -->
			<image
				mode="aspectFit"
				src="/pages_network/img/logo.png"
				class="logo"
			></image>
			<view class="title_box">
				<p class="title">请选择你的身份</p>
				<p class="tip">以帮助你更精准使用对应功能</p>
			</view>
			<button class="item_box" color="#fff" @click="goPage(1)">
				<view class="item_content">
					<!-- <uni-icons type="person-filled" color="#007cff" size="22"></uni-icons> -->
					<image
						class="img_tip"
						src="/pages_network/img/login/role-select-logo/user.jpg"
						mode="aspectFit"
					></image>
					<span>我是消费者</span>
				</view>
				<!-- <uni-icons type="arrow-right" color="#000" size="22"></uni-icons> -->
				<image
					src="../../../static/right.svg"
					style="width: 50rpx; height: 50rpx"
					mode="aspectFit"
				></image>
			</button>
			<!-- <button class="item_box" color="#fff" open-type="getPhoneNumber" @getphonenumber="(e)=>getCodeLogin(e,2)"> -->
			<button class="item_box" color="#fff" @click="goPage(2)">
				<view class="item_content">
					<!-- <uni-icons type="shop-filled" color="#007cff" size="22"></uni-icons> -->
					<image
						class="img_tip"
						src="/pages_network/img/login/role-select-logo/network.png"
						mode="aspectFit"
					></image>
					<span>我是服务商</span>
				</view>
				<image
					src="../../../static/right.svg"
					style="width: 50rpx; height: 50rpx"
					mode="aspectFit"
				></image>
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref, watch, nextTick} from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import roleStore from '@/store/role-play.js';
	
	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	const btom = ref('');
	onLoad((e) => {
		if (e?.custCode) {
			uni.setStorageSync('custCode', e?.custCode);
		}
		btom.value = uni.getWindowInfo().windowHeight + 'px';
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS|| MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
		
		uni.hideTabBar()
	});

	const goPage = (val) => {
		if (val == 1) {
			uni.navigateTo({
				url: '/pages/pages_user/login/login',
			});
		} else {
			uni.navigateTo({
				url: '/pages/pages_network/login/login',
			});
		}
	};
</script>

<style lang="scss" scoped>
	.app_main {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: url('~@/pages_network/img/background-image.jpg');
		background-size: 100% 100vh;
		background-position: center;
		background-repeat: no-repeat;

		.navbar {
			.fixed {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
				width: 100%;

				.navbar-content {
					display: flex;
					align-items: center;
				}

				.header_ele {
					height: 120rpx;
				}
			}
		}

		.logo_main {
			/* #ifdef MP-WEIXIN */
			// padding: 50rpx 60rpx 20rpx;
			// padding: 50rpx 60rpx 20rpx;
			padding: 0 60rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			padding: 120rpx 60rpx 60rpx 60rpx;
			/* #endif */
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			flex: 1;
			row-gap: 60rpx;
			
			.logo {
				width: 100%;
				height: 240rpx;
			}

			.title_header {
				color: #fff;
				font-weight: bold;
				font-size: 38rpx;
				margin-left: 10rpx;
				// text-align: center;
			}

			.title_box {
				display: flex;
				flex-direction: column;
				row-gap: 20rpx;
				color: #333;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					font-family: '黑体';
				}

				.tip {
					font-size: 26rpx;
				}
			}

			.item_box {
				display: flex;
				width: 100%;
				background-color: #fff;
				padding: 20rpx 60rpx;
				border-radius: 20rpx;

				// color: #007cff;
				justify-content: space-between;
				font-family: 'Gill Sans', sans-serif;
				align-items: center;
				// padding-left: 60rpx;

				.item_content {
					display: flex;
					column-gap: 20rpx;
					align-items: center;
					justify-content: space-between;
					font-weight: bold;
					font-size: 34rpx;
					color: #444;
					.img_tip {
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
		}
	}
</style>
